<!-- Author: Edwin -->
<template>
  <el-card shadow="never"
           class="aui-card--fill" v-loading="loading">
    <el-tabs class="custom-temp-css">
      <el-tab-pane label="My Dashboards">
        <div style="text-align:right;margin-bottom:14px;">
          <el-button  type="primary" size="small">New Dashboard</el-button>
          <el-button size="small">Bot check</el-button>
          <el-button type="primary"
                      size="small">Close books</el-button>
         <el-button type="primary"
                      size="small">Comments</el-button>
          <el-button type="danger"
                      size="small">Approve books</el-button>
        </div>
        <el-tabs tab-position='left'
                style="height: 100%;text-align-last: left;">
          <el-tab-pane :label="PLlable">
              <pvtable pageId="product-margin" />
          </el-tab-pane>
          <!-- -->
          <el-tab-pane label="Balance sheet reports">
              <pvtable pageId="balance-sheet-reports" />
          </el-tab-pane>
                <el-tab-pane label="Sales KPI reports">
              <pvtable pageId="sales-KPI-reports" />
          </el-tab-pane>
                <el-tab-pane label="Service KPI reports">
              <pvtable pageId="service-KPI-reports" />
          </el-tab-pane>
          <el-tab-pane label="Admin KPI reports">
                <pvtable pageId="admin-KPI-reports" />
          </el-tab-pane>

          <el-tab-pane label="Budget vs. Actuals">
          </el-tab-pane>
          <el-tab-pane label="Statement of Cash Flows">
          </el-tab-pane>
          <el-tab-pane label="Accounts receivable aging">
          </el-tab-pane>
          <el-tab-pane label="Customer Balance">
          </el-tab-pane>
          <el-tab-pane label="Open Invoices">
          </el-tab-pane>
          <el-tab-pane label="Sales by Customer">
          </el-tab-pane>
          <el-tab-pane label="Sales by Product/Service">
          </el-tab-pane>
          <el-tab-pane label="Accounts payable aging">
          </el-tab-pane>
          <el-tab-pane label="Unpaid Bills">
          </el-tab-pane>
          <el-tab-pane label="Sales Tax Liability Report">
          </el-tab-pane>
          <el-tab-pane label="Trial Balance">
          </el-tab-pane>

        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="Group Reports">
        <el-tabs tab-position='left'
                style="height: 100%;text-align-last: left;">
          <el-tab-pane label="Books close / Approval status">
            <pvtable pageId="books-close-status" />
          </el-tab-pane>
          <el-tab-pane label="Product Margin Report">
            <pvtable pageId="product-margin" />
          </el-tab-pane>
          <el-tab-pane label="Installation Revenue">
            <pvtable pageId="installation-revenue" />
          </el-tab-pane>
          <el-tab-pane label="Total Service Revenue">
            <pvtable pageId="total-service-revenue2" />
          </el-tab-pane>
          <el-tab-pane label="Services to Total Revenue">
            <pvtable pageId="services-to-total-revenue" />
          </el-tab-pane>
          <el-tab-pane label="Percent of Recurring Revenues">
            <pvtable pageId="percent-of-recurring-revenues" />
          </el-tab-pane>
          <el-tab-pane label="Project and Installation">
            <pvtable pageId="project-and-nstallation" />
          </el-tab-pane>
          <el-tab-pane label="Percent Other Non-Recurring Revenue">
            <pvtable pageId="percent-other-non-recurring-revenue" />
          </el-tab-pane>
          <el-tab-pane label="Percent Service Salaries">
            <pvtable pageId="percent-service-salaries" />
          </el-tab-pane>
          <el-tab-pane label="Percent Recurring COGS">
            <pvtable pageId="percent-recurring-cogs" />
          </el-tab-pane>
          <el-tab-pane label="Service Gross Profit Margin">
            <pvtable pageId="service-gross-profit-margin" />
          </el-tab-pane>
          <el-tab-pane label="Percent Training Expense9">
            <pvtable pageId="percent-training-expense" />
          </el-tab-pane>
          <el-tab-pane label="Percent Sales Salaries and Commissions">
            <pvtable pageId="percent-sales-salaries-and-commissions" />
          </el-tab-pane>
          <el-tab-pane label="Percent Advertising and Marketing">
            <pvtable pageId="percent-advertising-and-marketing" />
          </el-tab-pane>
          <el-tab-pane label="Gross Profit Margin After Sales Expense">
            <pvtable pageId="gross-profit-margin-after-sales-expense" />
          </el-tab-pane>
          <el-tab-pane label="Admin as a Percentage">
            <pvtable pageId="admin-as-a-percentage" />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="Connector">
        <el-card shadow="never"
                  class="aui-card--fill">
          <ConnectorComponent />
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="Mapping">
        <Accounting />
      </el-tab-pane>
      <el-tab-pane label="KPI">
        <el-card shadow="never"
                 class="aui-card--fill">
          <el-form inline>
            <el-form-item label="Name">
              <el-input v-model="KPI.inputName"
                        @keyup.enter.native="searchKpiTable"
                         style="width:300px"
                        placeholder="Please enter the key word"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small"
                         @click="searchKpiTable">Search</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="small"
                         type="primary"
                         @click="openDialog('kAdd')">Add</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="KPI.tableData"
                    style="width: 100%">
            <el-table-column prop="name"
                             label="Name">
            </el-table-column>
            <el-table-column prop="formula"
                             label="Formula">
            </el-table-column>
            <el-table-column prop="action"
                             label="Action"
                             width="300px">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="editKpiData(scope)">Edit</el-button>
                <el-button type="text"
                           @click="deleteKpiData(scope)">Delete</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="Benchmarks">
        <el-card shadow="never"
                 class="aui-card--fill">
          <el-form inline>
            <el-form-item label="Name">
              <el-input v-model="Bencharks.inputName"
                        @keyup.enter.native="searchBencharksTable"
                        style="width:300px"
                        placeholder="Please enter the key word"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small"
                         @click="searchBencharksTable">Search</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="small"
                         type="primary"
                         @click="openDialog('bAdd')">Add</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="Bencharks.tableData"
                    style="width: 100%">
            <el-table-column prop="name"
                             label="Name">
            </el-table-column>
            <el-table-column prop="description"
                             label="Description">
            </el-table-column>
            <el-table-column prop="action"
                             label="Action"
                             width="300px">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="editBencharksData(scope)">Edit</el-button>
                <el-button type="text"
                           @click="deleteBencharksData(scope)">Delete</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="Groups">
        <el-card shadow="never"
                 class="aui-card--fill">
          <div style="text-align:right;margin-bottom:14px;">
            <el-button type="success"
                       size="small">New Group</el-button>
            <el-button type="primary"
                       size="small">Invite</el-button>
          </div>
          <div class="group-title"
               style="font-weight:bold;background:#efefef;">
            <div class="group">Group</div>
            <div class="company-name">Company Name</div>
            <div class="status">Status</div>
            <div class="next-meeting-date">Next Meeting date</div>
            <div class="action">Action</div>
          </div>
          <el-collapse v-model="Group.activeNames">
            <el-collapse-item :name="items.groupName"
                              v-for="items in Group.treeData"
                              :key="items.id">
              <div class="group-title"
                   slot="title">
                <div class="group">{{ items.groupName }}</div>
                <div class="company-name">{{ items.companyName }}</div>
                <div class="status">{{ items.status }}</div>
                <div class="next-meeting-date">{{ items.nextMeetingDate }}</div>
                <div class="action">{{ items.action }}</div>
              </div>
              <div class="group-title"
                   v-for="item in items.subGroup"
                   :key="item.id">
                <div class="group">{{ item.groupName }}</div>
                <div class="company-name">{{ item.companyName }}</div>
                <div class="status">
                  <div v-if="item.status === 'Accepted'"
                       style="width:6px;height:6px;border-radius:50%;background:#18C643;margin-right:6px;"></div>
                  <div v-if="item.status === 'Waiting Accepted'"
                       style="width:6px;height:6px;border-radius:50%;background:#F59A23;margin-right:6px;"></div>
                  <div>{{ item.status }}</div>
                </div>
                <div class="next-meeting-date">{{ item.nextMeetingDate }}</div>
                <div class="action">
                  <el-button v-if="item.action === 'in'"
                             type="text"
                             @click="leaveGroup(item)">Leave</el-button>
                  <el-button v-if="item.action === 'out'"
                             type="text"
                             @click="acceptGroup(item)">Accept</el-button>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="Due dates">
        <el-card shadow="never"
                 class="aui-card--fill">
          <el-form label-width="1px">
            <el-form-item>
              <span style="fontWeight:bold;">Accountability setting:</span>
            </el-form-item>
            <el-form-item label-width="100px"
                          label="Bookkeeper:">
              <el-select v-model="DueDates.bookkeper.name"
                         size="small">
                <el-option v-for="item in ['bookkeper one', 'bookkeper two', 'bookkeper three']"
                           :key="item"
                           :value="item"></el-option>
              </el-select>
              .Close books every month by
              <el-select v-model="DueDates.bookkeper.closeDay"
                         size="small">
                <el-option v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]"
                           :key="`b${item}`"
                           :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="100px"
                          label="Owner:">
              <el-select v-model="DueDates.owner.name"
                         size="small">
                <el-option v-for="item in ['owner one', 'owner two', 'owner three']"
                           :key="item"
                           :value="item"></el-option>
              </el-select>
              , Approve books every month by
              <el-select v-model="DueDates.owner.closeDay"
                         size="small">
                <el-option v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]"
                           :key="`o${item}`"
                           :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span style="fontWeight:bold;">
                Group meeting due dates:
              </span>
            </el-form-item>
            <el-form-item>
              Reminder for bookkeeper close books
              <el-input v-model="DueDates.bookkeeperDueDate"
                        style="width:90px;"
                        placeholder="Number"></el-input>
              days before the group meeting date.
            </el-form-item>
            <el-form-item>
              Reminder for owner approve books
              <el-input v-model="DueDates.ownerDueDate"
                        style="width:90px;"
                        placeholder="Number"></el-input>
              days before the group meeting date.
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         size="small"
                         @click="$message.success('Successed.')">Save</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="Bots">
        <BotsComponent />
      </el-tab-pane>

    </el-tabs>
    <el-dialog :visible.sync='dialogData.editDialogStatus'
               @closed='closeAfterDialog'
               width="600px">
      <div slot="title">
        <template v-if="dialogData.type === 'kAdd' || dialogData.type === 'bAdd'">Add</template>
        <template v-if="dialogData.type === 'kEdit' || dialogData.type === 'bEdit'">Edit</template>
      </div>
      <el-form label-width="120px">
        <el-form-item label="Name">
          <el-input v-model="dialogData.info.name"
                    placeholder="Please input name"></el-input>
        </el-form-item>
        <el-form-item label="Formula"
                      v-if="dialogData.type === 'kAdd' || dialogData.type === 'kEdit'">
          <el-input v-model="dialogData.info.formula"
                    type="textarea"
                    placeholder="Please input formula"></el-input>
        </el-form-item>
        <el-form-item label="Description"
                      v-if="dialogData.type === 'bAdd' || dialogData.type === 'bEdit'">
          <el-input v-model="dialogData.info.description"
                    type="textarea"
                    placeholder="Please input description"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogData.type === 'kAdd' || dialogData.type === 'kEdit'"
                      label="TAPP V1">
          <el-input v-model="dialogData.info.tappV1"
                    placeholder="Please input TAPP V1"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogData.type === 'kAdd' || dialogData.type === 'kEdit'"
                      label="Profit master">
          <el-input v-model="dialogData.info.profitMaster"
                    placeholder="Please input Profit master"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogData.type === 'kAdd' || dialogData.type === 'kEdit'"
                      label="Company Avg">
          <el-input v-model="dialogData.info.companyAvg"
                    placeholder="Please input Company Avg"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogData.type === 'kAdd' || dialogData.type === 'kEdit'"
                      label="Group Avg">
          <el-input v-model="dialogData.info.groupAvg"
                    placeholder="Please input Group Avg"></el-input>
        </el-form-item>
        <el-form-item label-width="1px"
                      v-for="item in dialogData.info.kpiList"
                      :key="item.name">
          <el-form inline>
            <el-form-item v-if="dialogData.type === 'bAdd' || dialogData.type === 'bEdit'"
                          label-width="119px"
                          label="KPI">
              <el-select v-model="item.name"
                         clearable
                         placeholder="Please select KPI"
                         style="width:185px;">
                <el-option v-for="item in KPI.tableData"
                           :key="item.name"
                           :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="dialogData.type === 'bAdd' || dialogData.type === 'bEdit'"
                          label-width="60px"
                          label="Color"
                          style="marginRight:0;">
              <div style="width:185px;display:flex;justify-content:space-between;">
                <el-color-picker v-model="item.color[0]"
                                 size="small"></el-color-picker>
                <el-color-picker v-model="item.color[1]"
                                 size="small"></el-color-picker>
                <el-color-picker v-model="item.color[2]"
                                 size="small"></el-color-picker>
                <el-color-picker v-model="item.color[3]"
                                 size="small"></el-color-picker>
                <el-color-picker v-model="item.color[4]"
                                 size="small"></el-color-picker>
              </div>
              <!-- <el-select v-model="item.color"
                         clearable
                         multiple
                         :collapse-tags='true'
                         placeholder="Please select color"
                         style="width:185px">
                <el-option v-for="item in ['color1','color2','color3']"
                           :key="item"
                           :value="item"></el-option>
              </el-select> -->
            </el-form-item>
          </el-form>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button size="small"
                   @click="dialogData.editDialogStatus = false">Cancel</el-button>
        <el-button size="small"
                   type="primary"
                   @click="saveDialogData">Save</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import Accounting from '../modules/accounting'
import pvtable from '@/components/gadget/pvtable/pvtable-gadget.vue'
import BotsComponent from '../../bots/my-bots/index'
import ConnectorComponent from '../../Integrations/index'

export default {
  components: { Accounting, pvtable, BotsComponent, ConnectorComponent },
  data () {
    return {
      PLlable: 'P&L reports',
      Group: {
        treeData: [
          {
            id: 1,
            groupName: 'Group1',
            companyName: '',
            status: null,
            nextMeetingDate: '09/23/2020',
            action: null,
            subGroup: [
              {
                id: 11,
                groupName: '',
                companyName: 'PR MA MA',
                status: 'Accepted',
                nextMeetingDate: '09/23/2020',
                action: 'in'
              },
              {
                id: 12,
                groupName: '',
                companyName: 'PR MA MA2',
                status: 'Waiting Accepted',
                nextMeetingDate: '09/23/2020',
                action: null
              },
              {
                id: 13,
                groupName: '',
                companyName: '73789902 737901 737302',
                status: 'Waiting Accepted',
                nextMeetingDate: '09/23/2020',
                action: 'out'
              }
            ]
          },
          {
            id: 2,
            groupName: 'Group2',
            companyName: '',
            status: null,
            nextMeetingDate: '09/23/2020',
            action: null,
            subGroup: [
              {
                id: 21,
                groupName: '',
                companyName: '73789902 737901 737302',
                status: 'Accepted',
                nextMeetingDate: '09/23/2020',
                action: 'in'
              }
            ]
          }
        ],
        // commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' }, title: 'action' }]
        activeNames: ['Group1', 'Group2']
      },
      KPI: {
        inputName: null,
        tableData: [
          {
            name: 'Product Margin',
            formula: 'Product Gross Profit / Product Revenue'
          },
          {
            name: 'Percent Services to Total Revenue*',
            formula: 'Total Service Revenue / Total Revenue'
          },
          {
            name: 'Service Gross Profit Margin',
            formula: 'Service Gross Profit / Total Service Revenues'
          },
          {
            name: 'Gross Profit Margin After Sales Expense',
            formula: ' Gross Profit After Sales Expense / Total Revenue'
          },
          {
            name: 'Admin as a Percentage of Total Revenue',
            formula: ' Admin Dept. Expenses / Total Revenue'
          },
          {
            name: 'Net Operating Profit Margin',
            formula: ' Net Operating Profit / Total Revenue'
          }
        ]
      },
      Bencharks: {
        inputName: null,
        tableData: [
          {
            name: 'TAAP ver 1',
            description: 'TAAP ver 1',
            kpiList: [
              {
                name: 'Percent Services to Total Revenue*',
                formula: 'Total Service Revenue / Total Revenue',
                color: []
              },
              {
                name: 'Service Gross Profit Margin',
                formula: 'Service Gross Profit / Total Service Revenues',
                color: []
              }
            ]
          },
          {
            name: 'Profit Masters',
            description: 'Profit Masters',
            kpiList: [
              {
                name: 'Percent Services to Total Revenue*',
                formula: 'Total Service Revenue / Total Revenue',
                color: []
              },
              {
                name: 'Service Gross Profit Margin',
                formula: 'Service Gross Profit / Total Service Revenues',
                color: []
              }
            ]
          },
          {
            name: 'Company Avg',
            description: 'Company Avg',
            kpiList: [
              {
                name: 'Percent Services to Total Revenue*',
                formula: 'Total Service Revenue / Total Revenue',
                color: []
              },
              {
                name: 'Service Gross Profit Margin',
                formula: 'Service Gross Profit / Total Service Revenues',
                color: []
              }
            ]
          },
          {
            name: 'Group Avg',
            description: 'Group Avg',
            kpiList: [
              {
                name: 'Percent Services to Total Revenue*',
                formula: 'Total Service Revenue / Total Revenue',
                color: []
              },
              {
                name: 'Service Gross Profit Margin',
                formula: 'Service Gross Profit / Total Service Revenues',
                color: []
              }
            ]
          }
        ]
      },
      DueDates: {
        bookkeper: {
          name: null,
          closeDay: null
        },
        owner: {
          name: null,
          closeDay: null
        },
        bookkeeperDueDate: null,
        ownerDueDate: null
      },
      dialogData: {
        editDialogStatus: false,
        editIndex: null,
        type: 'kAdd', // kAdd kEdit bAdd bEdit
        info: {
          name: '',
          formula: '',
          description: '',
          // KPI
          // benchmarks: [],
          profitMaster: '',
          tappV1: '',
          companyAvg: '',
          groupAvg: '',
          // Bencharks
          kpi: '',
          color: ''
        }
      }
    }
  },
  methods: {
    saveDialogData () {
      switch (this.dialogData.type) {
        case 'kAdd':
          this.KPI.tableData.push(this.dialogData.info)
          break
        case 'kEdit':
          this.KPI.tableData.splice(this.dialogData.editIndex, 1, this.dialogData.info)
          break
        case 'bAdd':
          this.Bencharks.tableData.push(this.dialogData.info)
          break
        case 'bEdit':
          this.Bencharks.tableData.splice(this.dialogData.editIndex, 1, this.dialogData.info)
          break

        default:
          break
      }
      this.dialogData.editDialogStatus = false
      this.$message.success('Successed.')
    },
    editKpiData (e) {
      this.dialogData.editIndex = e.$index
      this.openDialog('kEdit', e.row)
    },
    deleteKpiData (e) {
      this.KPI.tableData.splice(e.$index, 1)
    },
    editBencharksData (e) {
      this.dialogData.editIndex = e.$index
      this.openDialog('bEdit', e.row)
    },
    deleteBencharksData (e) {
      this.Bencharks.tableData.splice(e.$index, 1)
    },
    openDialog (type, info) {
      this.dialogData.editDialogStatus = true
      type && (this.dialogData.type = type)
      info && (Object.assign(this.dialogData.info, info))
    },
    closeAfterDialog () {
      Object.assign(this.$data.dialogData, this.$options.data().dialogData)
    },
    searchKpiTable () {
      this.KPI.tableData = this.searchArray(this.KPI.inputName, this.$options.data().KPI.tableData)
    },
    searchBencharksTable () {
      this.Bencharks.tableData = this.searchArray(this.Bencharks.inputName, this.$options.data().Bencharks.tableData)
    },
    searchArray (name, tableData) {
      if (tableData && tableData.length && tableData.length > 0) {
        let reg = new RegExp(name)
        let tempList = []
        for (let i = 0; i < tableData.length; i++) {
          var temp = tableData[i].name
          if (temp.match(reg)) {
            tempList.push(tableData[i])
          }
        }
        return tempList
      }
    },
    acceptGroup (e) {
      this.Group.treeData.map(item => {
        item.subGroup.map(o => {
          if (e.id === o.id) {
            o.action = 'in'
            o.status = 'Accepted'
          }
        })
      })
    },
    leaveGroup (e) {
      this.Group.treeData.map(item => {
        item.subGroup.map(o => {
          if (e.id === o.id) {
            o.action = 'out'
            o.status = 'Waiting Accepted'
          }
        })
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.group-title {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #efefef;
  height: 42px;
  line-height: 42px;
  padding-left: 21px;
  .group {
    width: 20%;
  }
  .company-name {
    width: 35%;
  }
  .status {
    width: 20%;
    display: flex;
    align-items: center;
  }
  .next-meeting-date{
    width: 15%;
  }
  .action{
    width: 10%;
  }
}
</style>
<style lang="scss">
.custom-temp-css{
  .el-collapse-item__header{
    height: 42px;
    line-height: 42px;
    background: #fafafa;
  }
  .el-collapse-item__content{
    padding: 0;
  }
  .el-table td, .el-table th{
    padding: 0;
    height: 42px;
    line-height: 42px;
  }
    .el-table th.is-leaf {
     background:#efefef;
   }
}
</style>
